<template>
  <view class="goods">
    <view class="img">
      <img :src="good.img" alt="商品图片" />
    </view>

    <view class="goods-info">
      <view class="title">{{ good.name }}</view>
      <view class="price">
        <span>{{ good.price }}</span>
        积分
      </view>
      <view class="btn-exchange">
        <!-- 传goods id做为参数 -->
        <button @click="ToExchange(good.id)">去兑换</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    good: {
      type: Object
    }
  },
  data () {
    return {};
  },
  methods: {
    // 传入一个商品的id
    ToExchange (id = 123) {
      console.log('child', id);
      this.$emit('toExchange', id);
    }
  }
};
</script>

<style lang="scss" scoped>
.goods {
  border-radius: 25rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 40rpx 20rpx;
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  box-shadow: 0 10rpx 20rpx 5rpx darkgray;
  margin-top: 20rpx;

  .img {
    width: 200rpx;
    height: 200rpx;

    img {
      border-radius: 20rpx;
      width: 100%;
      height: 100%;
    }
  }

  .goods-info {
    flex: 1;
    font-size: 28rpx;

    .title {
      display: inline-block;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 32rpx;
    }

    .price {
      height: 60rpx;
      line-height: 60rpx;
      color: darkgray;

      span {
        margin-right: 10rpx;
        color: #55d4ff;
      }
    }

    .btn-exchange {
      $radius: 30rpx;

      button {
        margin: 0;
        margin-left: auto;
        font-size: 30rpx;
        width: 150rpx;
        height: 60rpx;
        line-height: 60rpx;
        color: #fff;
        background-color: skyblue;
        border-radius: $radius 0 $radius $radius;
      }
    }
  }
}
</style>
